<!DOCTYPE html>
<html lang="" class="loading">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate">
    
    
    <meta name="author" content="艾尔蓝德"> 
    
    <link rel="icon" type="image/x-icon" href="/img/favicon.png"> 
    <link rel="stylesheet" href="/css/diaspora.css">
</head>

<body class="loading">
  <div class="nav">
    <ul id="menu-menu" class="menu">
        
        <li class="pview menu-item menu-item-type-post_type menu-item-object-page">
            <a href="/about/" title="简介">简介</a>
        </li>
        
        <li class="pview menu-item menu-item-type-post_type menu-item-object-page">
            <a href="/taglist/" title="分类">分类</a>
        </li>
        
        <li class="pview menu-item menu-item-type-post_type menu-item-object-page">
            <a href="/demo/" title="Demo">Demo</a>
        </li>
        
    </ul>
  <ul class="menu menu-git">
    <li><a href="https://github.com/leitingx762" target="_blank">github</a></li>
    <li><a href="https://gitee.com/airgoo" target="_blank">gitee</a></li>
    <li><a href="https://weibo.com/u/2100563617" target="_blank">微博</a></li>
  </ul>
    <p id="copyright">
        &copy; 2019 艾尔的小窝，
        Powerd By：<a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
    </p>
</div>
<div id="header">
  <div>
    <a class="image-logo" href="/"></a>
    <div class="icon-menu switchmenu"></div>
  </div>
</div>

  <div id="top" style="display: block;">
<audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src>
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        <li title="0" data-url="http://link.hhtjim.com/163/5146554.mp3"></li>
                    
                        <li title="1" data-url="http://link.hhtjim.com/qq/001faIUs4M2zna.mp3"></li>
                    
                </ul>
            
    <div class="bar" style="width: 0;"></div>
    <a class="icon-left image-icon" href="javascript:history.go(-1)" data-url></a>
    <a class="icon-home image-icon" href="/"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">微信小程序：《概述》</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;">艾尔&nbsp;</a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
    <div class="scrollbar-mask"></div>
</div>

  <span id="config-title" style="display:none">艾尔的小窝</span>
  <div id="loader"></div>
  <div id="single">
    <div id="top" style="display: block;">
<audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src>
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        <li title="0" data-url="http://link.hhtjim.com/163/5146554.mp3"></li>
                    
                        <li title="1" data-url="http://link.hhtjim.com/qq/001faIUs4M2zna.mp3"></li>
                    
                </ul>
            
    <div class="bar" style="width: 0;"></div>
    <a class="icon-left image-icon" href="javascript:history.go(-1)" data-url></a>
    <a class="icon-home image-icon" href="/"></a>
    <div title="播放/暂停" class="icon-play"></div>
    <h3 class="subtitle">微信小程序：《概述》</h3>
    <div class="social">
        <!--<div class="like-icon">-->
            <!--<a href="javascript:;" class="likeThis active"><span class="icon-like"></span><span class="count">76</span></a>-->
        <!--</div>-->
        <div>
            <div class="share">
                <a title="获取二维码" class="icon-scan" href="javascript:;">艾尔&nbsp;</a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
    <div class="scrollbar-mask"></div>
</div>

    <div class="section">
        <div>
<div class="article">
    <div class="main">
        <h1 class="title">微信小程序：《概述》</h1>
        <div class="stuff">
            <span>9月 08, 2019</span>
            
  <ul class="post-tags-list"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/学习/">学习</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/微信小程序/">微信小程序</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/萌新的自我修养/">萌新的自我修养</a></li></ul>


        </div>
        <div class="content markdown">
            <h1 id="萌新的自我修养-之-《初窥微信小程序》"><a href="#萌新的自我修养-之-《初窥微信小程序》" class="headerlink" title="萌新的自我修养 之 《初窥微信小程序》"></a>萌新的自我修养 之 《初窥微信小程序》</h1><p>Ladies and 乡亲们！ 大家好~ =￣ω￣= 社会我萌新，人骚话不多。下面直接进入主题~</p>
<hr>
<p>小程序的大体结构 和 Vue 差不多，如果你有一点vue的基础，就可以进行简单的开发了。</p>
<p>遇到问题的话不要慌，小程序的<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener">文档</a>还是很贴心(大概…)哒<br><img src="./微信小程序-概述/阅读文档.jpg" alt="阅读文档"></p>
<h1 id="首先，说一下大概流程："><a href="#首先，说一下大概流程：" class="headerlink" title="首先，说一下大概流程："></a>首先，说一下大概流程：</h1><p>  <a href="https://mp.weixin.qq.com/cgi-bin/wx" target="_blank" rel="noopener">申请</a>一个开小程序</p>
<ol>
<li><a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/wn    load.html" target="_blank" rel="noopener">下载</a>开发工具</li>
<li>开发。</li>
<li>上线~</li>
</ol>
<p>就是这么简单<em>(:3 」∠)</em> -･･<em>‘<code></code></em>:.｡.:<em>･゜ﾟ･</em>☆</p>
<p>全文完。</p>
<p><img src="./微信小程序-概述/挨打.jpg" alt="挨打"></p>
<p>咳咳。。严肃点严肃点。</p>
<h1 id="下面说说开发规范"><a href="#下面说说开发规范" class="headerlink" title="下面说说开发规范"></a>下面说说开发规范</h1><p><img src="./微信小程序-概述/新建.jpg" alt="新建"><br>  小程序可以使用 ts/js 来进行开发，为了照顾本<code>萌新</code>这里我们先选择JS 还可以自己搭建服务器或者选择云服务器 (<del>充了钱你就能变得更强</del>)来提供后台服务。</p>
<h1 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h1><p>  在 Web 中，由于 js 需要操作 DOM 。导致 GUI 渲染线程和 js 引擎线程无法并行运行，所以大量重绘会阻塞 js ，这也是 dalao 们常说减少 DOM操作的原因了。</p>
<p>  为了解决这个问题，MVC(Angular)、 MVVM(Vue/React) 等框架粗线了~<br><img src="./微信小程序-概述/三大框架.jpg" alt="三大框架"></p>
<p>  微信小程序，思想类似 MVVM ，采用数据驱动模式。渲染层和逻辑层是分开的，所以说，只要你会Vue 那么上手是没有一点难度的。<br>  不过呢，这也就意味着 没有DOM! 没有DOM! 没有DOM! 同时也意味着 jQuery、Zepto 等js库是没法用了。</p>
<p>  <img src="./微信小程序-概述/menu.jpg" alt="menu"><br>  结构方面，最外层</p>
<ul>
<li>文件夹：<code>pages</code>、<code>utils</code>其他如<code>assets</code>、<code>components</code>、<code>fonts</code>等自定义文件夹</li>
<li><p>文件：<code>app.js</code> <code>app.wxss</code> <code>app.json</code> <code>sitemap.json</code> <code>project.config.json</code></p>
<p>文件夹的话其实随意，并没有硬性规定。pages文件夹里面有<code>index</code> <code>logs</code> 你也可以不用文件夹，全部在外面堆着。但是，每个页面都由<code>js</code> <code>wxml</code> <code>wxss</code> <code>json</code>组成,一旦页面多了，就变成一滩💩…<br><img src="./微信小程序-概述/long.jpg" alt></p>
<p>emmmm…所以<img src="./微信小程序-概述/你懂了.jpg" alt="你懂了"></p>
</li>
</ul>
<p><img src="./微信小程序-概述/外层预览.jpg" alt="外层预览"></p>
<h2 id="然后"><a href="#然后" class="headerlink" title="然后"></a>然后</h2><ol>
<li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html" target="_blank" rel="noopener">sitemap.json</a>  是配置SEO的 搜索功能仅限微信内部 <code>搜一搜</code> <code>小程序搜索</code> <code>微信搜索</code> 等的使用。 如果没有这个文件，则认为所有页面都允许搜索。</li>
<li>project.config.json  类似于 <code>package.json</code>+<code>webpack.config.js</code>的集合体 在工具上做的任何配置都会写入到这个文件，同时配置了当前项目类型是<code>小程序</code>还是<code>小游戏</code>，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。<a href="https://www.cnblogs.com/lizm166/p/9547816.html" target="_blank" rel="noopener">第三方文档</a></li>
<li><p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/config.html" target="_blank" rel="noopener">app.json</a> 是小程序的配置文件。</p>
<ul>
<li><p><code>pages</code> 字段是路由表，数组的第一项就是小程序的入口页面。</p>
</li>
<li><p><code>window</code> 字段可以设置窗口颜色。</p>
</li>
<li><p><code>networkTimeout</code> 配置全局网络超时。</p>
</li>
<li><p><code>enablePullDownRefresh</code> 配置下拉刷新。</p>
</li>
</ul>
<p>还有开启 debug 模式等。。。。。。<br>细心的同学会发现，页面文件里也有 <code>.json</code> 文件。(<del>华生，你发现盲点了。</del>)  页面的json同样可以进行类似配置，路由表由<code>组件列表</code>代替，其他配置将<code>覆盖</code>全局配置。</p>
</li>
<li>app.js是小程序的入口文件，里面有<code>全局唯一</code> 的<code>App()</code>实例，<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onlaunchobject-object" target="_blank" rel="noopener">小程序生命周期</a><code>钩子onLaunch</code> <code>onShow</code> <code>onHide</code> <code>onError</code> <code>onError</code> 其内部定义的函数，变量均可全局使用，只要通过<code>getApp()</code>方法获取当前小程序实例就行了~~</li>
</ol>
<h1 id="页面结构"><a href="#页面结构" class="headerlink" title="页面结构"></a>页面结构</h1><p>  说完了外部结构，我们接着说页面结构，点击新建，会弹出这么个东西~</p>
<p><img src="./微信小程序-概述/newpage.jpg" alt="newpage"></p>
<p>  然后新建page，就会获得 <code>wxml</code> <code>wxss</code> <code>js</code> <code>json</code> 套装。</p>
<p><img src="./微信小程序-概述/页面预览.jpg" alt="页面预览"></p>
<ul>
<li><p><code>js</code>不需要解释，由构造函数<code>Page()</code>生成，包括</p>
<ul>
<li><p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html" target="_blank" rel="noopener">页面生命周期</a> <code>onLoad</code> <code>onHide</code> <code>onShow</code> <code>onUnload</code></p>
</li>
<li><p>页面数据<code>data</code>对象</p>
</li>
<li><p>页面方法函数</p>
</li>
</ul>
</li>
<li><p><code>wxss</code>就是<code>css</code>,还是熟悉的语法，还是熟悉的味道。除了不能用id选择器和属性选择器，通俗点就是：使用 <code>class</code>选择器</p>
</li>
<li><p><code>wxml</code>就是<code>html</code>，这回不熟悉了，里面可没有div，有的只是小程序自己的组件。具体参考<a href="https://developers.weixin.qq.com/miniprogram/dev/component/" target="_blank" rel="noopener">组件</a>,同时呢，语法方面也类似<code>Vue</code> 引号+双大括号 内部的就是函数、变量，同时也可以写js代码。</p>
</li>
</ul>
<h1 id="设计指南"><a href="#设计指南" class="headerlink" title="设计指南"></a>设计指南</h1><p>  代码写完了，准备上线！！！！撒花！(~▽~)o∠※PAN!=.:<em>:’☆.:</em>:’★</p>
<p>  然鹅。。。。。。<br><img src="./微信小程序-概述/refus.jpg" alt="refus"><br><img src="./微信小程序-概述/掀桌.jpg" alt="掀桌"><br><img src="./微信小程序-概述/菜刀.jpg" alt="菜刀"></p>
<h2 id="古人云：行百步者半九十。。。-闭嘴！"><a href="#古人云：行百步者半九十。。。-闭嘴！" class="headerlink" title="古人云：行百步者半九十。。。(闭嘴！)"></a>古人云：行百步者半九十。。。(<del>闭嘴！</del>)</h2><p>  坑萌新呐这是！！！<br>  你以为开发完了就没事了吗？上线可是要过审滴~<br>  骚年，我看你骨骼惊奇，我这里有一本鹅厂出品的<a href="https://developers.weixin.qq.com/miniprogram/design/" target="_blank" rel="noopener">微信小程序设计指南</a>，<del>见与你有缘，就十块卖给你了！</del></p>
<h1 id="运营指南"><a href="#运营指南" class="headerlink" title="运营指南"></a>运营指南</h1><p>  你以为上线就完事了吗？</p>
<p>  <img src="./微信小程序-概述/封禁.jpg" alt="封禁"></p>
<h2 id="胜败乃兵家常事，大侠请重新来过"><a href="#胜败乃兵家常事，大侠请重新来过" class="headerlink" title="胜败乃兵家常事，大侠请重新来过 "></a><del>胜败乃兵家常事，大侠请重新来过</del> <img src="./微信小程序-概述/流泪.jpg" alt="流泪"></h2><p>时间不早了，狗命要紧，本萌新第二天还要搬砖呢。。<img src="./微信小程序-概述/叹气.jpg" alt="叹气"></p>
<p><a href="https://developers.weixin.qq.com/miniprogram/product/" target="_blank" rel="noopener">运营规范</a>在此~</p>
<p>先行睡觉，下次再更~</p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
        </div>
        <ul id="pager" class="article">
          
          
            <li class="next">
                <a href="/posts/learn/Babel-7-初识.html" data-original-title>Babel-7：《初识》  →</a>
            </li>
          
        </ul>
    </div>
    
        <div class="side">
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#萌新的自我修养-之-《初窥微信小程序》"><span class="toc-number">1.</span> <span class="toc-text">萌新的自我修养 之 《初窥微信小程序》</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#首先，说一下大概流程："><span class="toc-number">2.</span> <span class="toc-text">首先，说一下大概流程：</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#下面说说开发规范"><span class="toc-number">3.</span> <span class="toc-text">下面说说开发规范</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#项目结构"><span class="toc-number">4.</span> <span class="toc-text">项目结构</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#然后"><span class="toc-number">4.1.</span> <span class="toc-text">然后</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#页面结构"><span class="toc-number">5.</span> <span class="toc-text">页面结构</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#设计指南"><span class="toc-number">6.</span> <span class="toc-text">设计指南</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#古人云：行百步者半九十。。。-闭嘴！"><span class="toc-number">6.1.</span> <span class="toc-text">古人云：行百步者半九十。。。(闭嘴！)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#运营指南"><span class="toc-number">7.</span> <span class="toc-text">运营指南</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#胜败乃兵家常事，大侠请重新来过"><span class="toc-number">7.1.</span> <span class="toc-text">胜败乃兵家常事，大侠请重新来过 </span></a></li></ol></li></ol>
        </div>
    
</div>

  <div class="article">
    <div id="comments">
    <div id="vcomment" class="comment"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
    <script>
    setTimeout(function(){new Valine({
        el: '#vcomment',
        notify: 'true',
        verify: 'true',
        app_id: "E4EBrYgyq96lCpJpkLv3ocNg-9Nh9j0Va",
        app_key: "4SyMSBx4cpGeujpQBr0MhtCJ",
        placeholder: "留个言呗 (⁄ ⁄•⁄ω⁄•⁄ ⁄)",
        avatar: "mp"
      })},0)

    </script>
</div>
  </div>

</div>
    </div>
</div>

  <script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/diaspora.js"></script>
<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">
<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>